/* eslint-disable @metamask/design-tokens/color-no-hex */
import React from 'react';
import { View } from 'react-native';
import Svg, {
  SvgProps,
  G,
  Rect,
  Path,
  Defs,
  ClipPath,
  LinearGradient,
  Stop,
  Text,
} from 'react-native-svg';
import { CardStatus, CardType } from '../../types';
import { truncateAddress } from '../../util/truncateAddress';

const cardImageOriginalWidth = 851;
const cardImageOriginalHeight = 540;
const cardImageAspectRatio = cardImageOriginalWidth / cardImageOriginalHeight;

type CardImageProps = {
  type: CardType;
  status: CardStatus;
  address?: string;
} & SvgProps;

const VirtualCardImage = (
  props: SvgProps & { address?: string; hasLowerOpacity: boolean },
) => (
  <View style={{ aspectRatio: cardImageAspectRatio }}>
    <Svg
      fill="none"
      width="100%"
      height="100%"
      viewBox={`0 0 ${cardImageOriginalWidth} ${cardImageOriginalHeight}`}
      opacity={props.hasLowerOpacity ? 0.5 : 1}
      {...props}
    >
      <G clipPath="url(#clip0_4219_2177)">
        <Rect width={850.7} height={540} rx={31.8} fill="#FF5C16" />
        <Path
          d="M339.921 308.8h126.578V97.92H339.921V308.8zM466.499 707.521h208.853V-16H466.499v723.521z"
          fill="#FFA680"
        />
        <Path
          d="M675.352 707.471h139.236v-284.8H675.352v284.8zM814.588 593.6h106.789V422.72H814.588V593.6z"
          fill="#FFA680"
        />
        <Path
          d="M675.352 422.72h245.529V194.88l-245.529-73.058V422.72zM339.921 97.92L466.499-16V97.92H339.921zM921.377 422.72l-.496-227.84v227.84h.496zM884.206 593.6l-69.618 113.921V593.6h69.618zM339.921 308.8l126.578 113.92V308.8H339.921z"
          fill="#FFA680"
        />
        <G clipPath="url(#clip1_4219_2177)">
          <Rect
            x={630}
            y={389}
            width={191}
            height={122}
            rx={61}
            fill="#fff"
            stroke="#fff"
            strokeWidth={10}
          />
          <Path
            d="M749.915 405.967h-48.986v88.019h48.986v-88.019z"
            fill="#FF5F00"
          />
          <Path
            d="M704.039 449.976c0-17.106 7.931-33.435 21.305-44.009-24.259-19.128-59.561-14.93-78.689 9.486-18.972 24.26-14.773 59.405 9.642 78.533a55.837 55.837 0 0069.203 0c-13.53-10.575-21.461-26.903-21.461-44.01z"
            fill="#EB001B"
          />
          <Path
            d="M816.008 449.976c0 30.947-25.038 55.985-55.984 55.985-12.597 0-24.727-4.199-34.524-11.975 24.26-19.128 28.459-54.273 9.331-78.689-2.8-3.421-5.91-6.687-9.331-9.33 24.26-19.128 59.561-14.93 78.533 9.486 7.776 9.797 11.975 21.927 11.975 34.523z"
            fill="#F79E1B"
          />
        </G>
        <Path
          d="M695.304 346.59l-68.066-20.225-51.331 30.62-35.814-.014-51.361-30.606-68.036 20.225L400 276.873l20.696-77.375L400 134.079 420.696 53l106.312 63.382h61.984L695.304 53 716 134.079l-20.696 65.419L716 276.873l-20.696 69.717z"
          fill="#FF5C16"
        />
        <Path
          d="M420.711 53l106.312 63.426-4.228 43.529L420.711 53zM488.747 276.903l46.777 35.558-46.777 13.904v-49.462zM531.785 218.117l-8.99-58.133-57.548 39.529-.029-.015v.029l.178 40.688 23.336-22.098h43.053zM695.304 53l-106.312 63.426 4.213 43.529L695.304 53zM627.268 276.903l-46.777 35.558 46.777 13.904v-49.462zM650.782 199.527h.015-.015v-.029l-.014.015-57.548-39.529-8.991 58.133h43.039l23.351 22.098.163-40.688z"
          fill="#FF5C16"
        />
        <Path
          d="M488.732 326.365l-68.036 20.225L400 276.903h88.732v49.462zM531.77 218.102l12.997 84.038-18.011-46.726-61.39-15.198 23.351-22.114H531.77zM627.268 326.365l68.036 20.225L716 276.903h-88.732v49.462zM584.229 218.102l-12.996 84.038 18.011-46.726 61.39-15.198-23.366-22.114h-43.039z"
          fill="#E34807"
        />
        <Path
          d="M400 276.873l20.696-77.375h44.507l.163 40.702 61.39 15.199 18.011 46.726-9.258 10.291-46.777-35.558H400v.015zM716 276.873l-20.696-77.375h-44.507l-.163 40.702-61.39 15.199-18.011 46.726 9.258 10.291 46.777-35.558H716v.015zM588.992 116.382h-61.984l-4.213 43.528 21.972 142.171h26.466L593.22 159.91l-4.228-43.528z"
          fill="#FF8D5D"
        />
        <Path
          d="M420.696 53L400 134.079l20.696 65.419h44.507l57.577-39.543L420.696 53zM518.908 234.981h-20.162l-10.978 10.737 39.003 9.651-7.863-20.403v.015zM695.304 53L716 134.079l-20.696 65.419h-44.507l-57.577-39.543L695.304 53zM597.122 234.981h20.191l10.979 10.752-39.048 9.666 7.878-20.433v.015zM575.892 329.25l4.599-16.804-9.257-10.291h-26.482l-9.258 10.291 4.599 16.804"
          fill="#661800"
        />
        <Path d="M575.892 329.25V357h-35.799v-27.75h35.799z" fill="#C0C4CD" />
        <Path
          d="M488.747 326.336l51.376 30.65v-27.75l-4.599-16.805-46.777 13.905zM627.268 326.336l-51.376 30.65v-27.75l4.599-16.805 46.777 13.905z"
          fill="#E7EBF6"
        />
        <Path
          d="M131.489 92.454v19.548h-10.158V98.459l-11.577 1.337c-2.542.292-3.661 1.118-3.661 2.64 0 2.23 2.124 3.169 6.676 3.169 2.776 0 5.852-.41 8.568-1.118l-5.259 7.396c-2.124.47-4.194.702-6.378.702-9.213 0-14.472-3.639-14.472-10.095 0-5.696 4.134-8.687 13.527-9.745l12.408-1.433c-.67-3.585-3.392-5.143-8.806-5.143-5.08 0-10.691 1.29-15.71 3.698l1.596-8.746c4.667-1.938 9.986-2.936 15.358-2.936 11.816 0 17.9 4.875 17.9 14.263l-.012.006zM40.104 67.976L29 112.002h11.104l5.51-22.123 9.554 11.38h11.577l9.554-11.38 5.51 22.123h11.104L81.809 67.97 60.954 92.584 40.097 67.97l.006.006zm41.705-44.032L60.954 48.558l-20.85-24.614L29 67.976h11.104l5.51-22.123 9.554 11.38h11.577l9.554-11.38 5.51 22.123h11.104L81.809 23.944zm76.381 68.1l-8.98-1.29c-2.244-.352-3.129-1.06-3.129-2.29 0-1.998 2.184-2.877 6.677-2.877 5.199 0 9.865 1.058 14.771 3.347l-1.238-8.627c-3.961-1.41-8.508-2.11-13.234-2.11-11.044 0-17.075 3.816-17.075 10.683 0 5.345 3.309 8.336 10.338 9.394l9.1 1.35c2.303.35 3.249 1.231 3.249 2.64 0 1.997-2.124 2.937-6.438 2.937-5.671 0-11.816-1.35-16.835-3.758l1.005 8.627c4.314 1.588 9.925 2.527 15.184 2.527 11.343 0 17.248-3.936 17.248-10.922 0-5.577-3.308-8.573-10.631-9.626l-.012-.006zm14.592-20.138v40.096h10.158V71.906h-10.158zm22.028 22.076l14.125-15.209h-12.641L182.94 94.505l14.239 17.491H210l-15.19-18.02v.006zm-23.446-35.519c0 6.457 5.259 10.096 14.472 10.096 2.184 0 4.254-.238 6.377-.702l5.259-7.396c-2.716.702-5.791 1.118-8.567 1.118-4.547 0-6.677-.94-6.677-3.17 0-1.527 1.125-2.348 3.662-2.639l11.576-1.338v13.544h10.159V48.427c0-9.394-6.085-14.263-17.9-14.263-5.379 0-10.691.999-15.358 2.937l-1.597 8.746c5.019-2.408 10.631-3.698 15.71-3.698 5.415 0 8.137 1.558 8.807 5.143l-12.408 1.433c-9.393 1.058-13.527 4.048-13.527 9.744l.012-.006zm-28.412-2.11c0 8.103 4.726 12.212 14.059 12.212 3.722 0 6.797-.589 9.746-1.939l1.298-8.864c-2.835 1.7-5.731 2.58-8.627 2.58-4.373 0-6.323-1.76-6.323-5.696V42.904h15.417v-8.157h-15.417V27.82l-19.318 10.155v4.929h9.153v13.443l.012.006zm-9.985-3.698v1.997h-27.455c1.239 4.067 4.918 5.928 11.451 5.928 5.199 0 10.045-1.058 14.353-3.11l-1.239 8.574c-3.96 1.64-8.98 2.527-14.119 2.527-13.646 0-21.089-5.987-21.089-17.082 0-11.094 7.562-17.319 19.259-17.319 11.696 0 18.845 6.754 18.845 18.49l-.006-.005zm-27.586-4.816h17.362c-.916-3.895-3.925-5.928-8.735-5.928s-7.664 1.98-8.627 5.928z"
          fill="#661800"
        />
      </G>
      {props.address && (
        <Text x={40} y={500} fontSize="40px" fontWeight={800} fill="#fff">
          {props.address}
        </Text>
      )}
      <Defs>
        <ClipPath id="clip0_4219_2177">
          <Rect width={850.7} height={540} rx={31.8} fill="#fff" />
        </ClipPath>
        <ClipPath id="clip1_4219_2177">
          <Path
            fill="#fff"
            transform="translate(625 384)"
            d="M0 0H201V132H0z"
          />
        </ClipPath>
      </Defs>
    </Svg>
  </View>
);

const MetalCardImage = (
  props: SvgProps & { address?: string; hasLowerOpacity: boolean },
) => (
  <View style={{ aspectRatio: cardImageAspectRatio }}>
    <Svg
      fill="none"
      width="100%"
      height="100%"
      viewBox={`0 0 ${cardImageOriginalWidth} ${cardImageOriginalHeight}`}
      opacity={props.hasLowerOpacity ? 0.5 : 1}
      {...props}
    >
      <G clipPath="url(#clip0_4219_2151)">
        <Rect width={850.7} height={540} rx={31.8} fill="#3D065F" />
        <Path
          d="M396.26 423.139l-102.746-30.47L216.03 438.8l-54.06-.022-77.53-46.109-102.7 30.47-31.24-105.034 31.24-116.572-31.24-98.559 31.24-122.152 160.478 95.49h93.564l160.478-95.49 31.24 122.152-31.24 98.559 31.24 116.572-31.24 105.034z"
          fill="#FF5C16"
        />
        <Path
          d="M-18.237-19.178L142.24 76.38l-6.383 65.579L-18.237-19.178zM84.464 318.15l70.609 53.57-70.61 20.949V318.15zM149.429 229.583l-13.571-87.58-86.868 59.552-.044-.022v.044l.268 61.3 35.227-33.294h64.988zM396.26-19.178L235.782 76.38l6.36 65.579L396.26-19.178zM293.559 318.15l-70.609 53.57 70.609 20.949V318.15zM329.054 201.577h.023-.023v-.044l-.022.022-86.868-59.552-13.571 87.58h64.966l35.249 33.294.246-61.3z"
          fill="#FF5C16"
        />
        <Path
          d="M84.44 392.669l-102.7 30.47L-49.5 318.15H84.44v74.519zM149.407 229.561l19.617 126.61-27.186-70.396-92.668-22.898 35.248-33.316h64.989zM293.559 392.669l102.701 30.47L427.5 318.15H293.559v74.519zM228.593 229.561l-19.618 126.61 27.187-70.396 92.668-22.898-35.271-33.316h-64.966z"
          fill="#E34807"
        />
        <Path
          d="M-49.5 318.105l31.24-116.573h67.183l.247 61.322 92.667 22.898 27.187 70.396-13.974 15.505-70.61-53.571H-49.5v.023zM427.5 318.105l-31.24-116.573h-67.184l-.246 61.322-92.668 22.898-27.187 70.396 13.975 15.505 70.609-53.571H427.5v.023zM235.782 76.312h-93.564l-6.36 65.579 33.166 214.191h39.952l33.188-214.191-6.382-65.579z"
          fill="#FF8D5D"
        />
        <Path
          d="M-18.26-19.178L-49.5 102.974l31.24 98.559h67.183l86.913-59.575L-18.26-19.178zM129.991 254.99H99.557l-16.572 16.177 58.875 14.54-11.869-30.739v.022zM396.26-19.178l31.24 122.152-31.24 98.559h-67.183l-86.913-59.575L396.26-19.178zM248.054 254.99h30.479l16.572 16.199-58.942 14.563 11.891-30.784v.022zM216.008 397.016l6.942-25.318-13.974-15.504h-39.974l-13.974 15.504 6.942 25.318"
          fill="#661800"
        />
        <Path
          d="M216.007 397.015v41.807H161.97v-41.807h54.037z"
          fill="#C0C4CD"
        />
        <Path
          d="M84.463 392.624l77.552 46.177v-41.808l-6.942-25.317-70.61 20.948zM293.559 392.624l-77.551 46.177v-41.808l6.942-25.317 70.609 20.948z"
          fill="#E7EBF6"
        />
        <G clipPath="url(#clip1_4219_2151)">
          <Path
            d="M803.928 484.417l-.189.416v6.867c-1.094-1.132-2.603-1.736-4.377-1.736-2.792 0-5.169 1.434-6.452 3.698-.83 1.245-1.283 2.754-1.283 4.49 0 4.49 3.245 7.735 7.433 7.735 1.321 0 2.453-.34 3.359-.906a5.82 5.82 0 001.358-1.018v1.584h3.245l.415-.188v-20.866h-3.471l-.038-.076zm-.566 16.074c-.755 1.208-2.075 1.925-3.622 1.925-2.604 0-4.377-1.887-4.377-4.604 0-1.735.717-3.131 1.924-3.886a4.76 4.76 0 012.151-.491c2.679 0 4.49 2.038 4.49 4.717 0 .868-.189 1.66-.528 2.339h-.038zM662.056 489.964h-.151c-2.189 0-3.924.868-5.094 2.528-1.094-1.66-2.792-2.528-4.905-2.528-1.849 0-3.207.642-4.226 1.962v-1.585h-3.472l-.188.415v14.716h3.245l.415-.189v-8.263c0-1.472.49-2.528 1.358-3.17.528-.264 1.132-.415 1.849-.415 2.151 0 3.245 1.397 3.245 3.887v8.188h3.245l.415-.189v-8.263c0-1.472.528-2.604 1.434-3.208.528-.264 1.132-.377 1.773-.377 2.189 0 3.245 1.396 3.245 3.887v8.187h3.245l.415-.188v-9.358c0-3.584-2.339-5.924-5.962-5.961l.114-.076zM743.745 489.964c-1.622 0-2.867.642-3.811 1.887v-1.547h-3.433l-.189.415v14.715h3.245l.415-.188v-8.377c0-1.509.415-2.566 1.207-3.132h.076s.038 0 .075-.037a3.835 3.835 0 011.396-.265c.642 0 1.321.076 2.038.378l.377-.151 1.057-3.245h-.113c-.793-.34-1.736-.453-2.34-.453zM726.238 489.964c-2.868 0-5.17 1.358-6.453 3.585-.83 1.245-1.282 2.792-1.282 4.603 0 4.679 3.169 7.735 7.621 7.735 1.774 0 3.472-.377 4.981-1.283a7.572 7.572 0 001.509-1.019l.076-.075-1.698-2.566-.113.076a6.844 6.844 0 01-4.264 1.509c-1.321 0-3.622-.415-4.264-3.17h10.527l.415-.188v-.113c.038-.416.076-.793.076-1.246 0-4.678-2.905-7.848-7.169-7.848h.038zm-2.264 3.736a4.203 4.203 0 011.886-.453c1.962 0 3.245 1.132 3.66 3.132h-7.169c.227-1.246.793-2.151 1.585-2.717l.038.038zM697.26 496.228l-1.51-.227c-1.509-.188-2.414-.49-2.414-1.32 0-.453.226-.83.566-1.095.452-.226 1.056-.339 1.811-.339 1.886 0 3.735.717 4.641 1.245l.339-.151 1.51-2.792-.076-.075c-1.547-1.019-3.698-1.547-6.112-1.547-2.906 0-5.019 1.056-5.849 2.829-.415.642-.641 1.434-.641 2.34 0 2.415 1.811 3.886 5.131 4.339l1.509.226c1.774.264 2.604.717 2.604 1.547 0 .189-.038.34-.113.491-.453.566-1.472.868-2.981.868-2.377 0-3.962-.83-4.867-1.51l-.114-.075-1.66 2.679-.151.264c1.774 1.283 4 1.924 6.415 1.924 1.962 0 3.546-.415 4.678-1.132 1.585-.867 2.528-2.226 2.528-3.961 0-2.491-1.773-4-5.282-4.528h.038zM788.646 489.964c-1.622 0-2.867.642-3.811 1.887v-1.547h-3.433l-.189.415v14.715h3.245l.415-.188v-8.377c0-1.509.415-2.566 1.207-3.132h.076s.038 0 .075-.037a3.835 3.835 0 011.396-.265c.642 0 1.321.076 2.038.378l.377-.151 1.057-3.245h-.113c-.793-.34-1.736-.453-2.34-.453zM715.861 501.586c-.905.528-1.924.83-2.792.83-1.396 0-2.037-.755-2.037-2.34v-6.339h4.867l.415-.188v-3.17h-5.282v-4.452h-3.509l-.189.415v4.037h-2.83l-.189.415v2.943h3.019v6.717c0 3.433 1.321 5.471 5.169 5.471 1.321 0 2.83-.378 3.887-1.057.188-.113.377-.188.528-.302h.075l-1.018-3.018-.114.075v-.037zM752.499 493.888c.604-.302 1.283-.453 2.037-.453 1.397 0 2.679.453 3.887 1.321l.339-.151 1.661-2.792-.076-.075c-1.622-1.283-3.169-1.774-5.433-1.774-3.132 0-5.622 1.434-6.981 3.736-.83 1.245-1.282 2.754-1.282 4.452 0 4.452 3.131 7.735 7.923 7.735 1.774 0 3.094-.34 4.377-1.094a9.054 9.054 0 001.358-.868l.076-.076-1.66-2.792-.113.076c-1.246.868-2.491 1.32-3.811 1.32-2.566 0-4.377-1.924-4.377-4.603 0-1.736.754-3.169 1.999-3.924l.076-.038zM682.544 490.756v.944c-1.094-1.132-2.603-1.736-4.377-1.736-2.792 0-5.169 1.434-6.452 3.698-.83 1.245-1.283 2.754-1.283 4.49 0 4.49 3.245 7.735 7.433 7.735 1.321 0 2.453-.34 3.359-.906a5.82 5.82 0 001.358-1.018v1.584h3.245l.415-.188v-14.942h-3.471l-.189.415-.038-.076zm-.339 9.735c-.755 1.208-2.076 1.925-3.623 1.925-2.603 0-4.377-1.887-4.377-4.604 0-1.735.717-3.131 1.925-3.886a4.752 4.752 0 012.15-.491c2.679 0 4.491 2.038 4.491 4.717 0 .868-.189 1.66-.529 2.339h-.037zM773.742 490.756v.944c-1.094-1.132-2.603-1.736-4.377-1.736-2.792 0-5.169 1.434-6.452 3.698-.83 1.245-1.283 2.754-1.283 4.49 0 4.49 3.245 7.735 7.434 7.735 1.32 0 2.452-.34 3.358-.906a5.82 5.82 0 001.358-1.018v1.584h3.245l.415-.188v-14.942h-3.471l-.189.415-.038-.076zm-.377 9.735c-.755 1.208-2.075 1.925-3.622 1.925-2.604 0-4.377-1.887-4.377-4.604 0-1.735.717-3.131 1.924-3.886a4.76 4.76 0 012.151-.491c2.679 0 4.49 2.038 4.49 4.717 0 .868-.189 1.66-.528 2.339h-.038z"
            fill="#666"
          />
          <Path
            d="M760.083 366.392c-30.826 0-55.918 24.865-55.918 55.466 0 30.6 25.092 55.466 55.918 55.466 30.827 0 55.919-24.866 55.919-55.466 0-30.601-25.092-55.466-55.919-55.466z"
            fill="url(#paint0_linear_4219_2151)"
          />
          <Path
            d="M690.921 366.392c-30.827 0-55.919 24.865-55.919 55.466 0 30.6 25.092 55.466 55.919 55.466 30.827 0 55.918-24.866 55.918-55.466 0-30.601-25.054-55.466-55.918-55.466z"
            fill="url(#paint1_linear_4219_2151)"
          />
          <Path
            d="M745.557 421.858c0-17.131-7.773-32.45-20.036-42.675-12.263 10.225-20.036 25.544-20.036 42.675 0 17.13 7.773 32.449 20.036 42.675 12.263-10.226 20.036-25.545 20.036-42.675z"
            fill="#737373"
          />
          <Path
            d="M810.682 456.269v-1.773h.717v-.377h-1.849v.377h.717v1.773h.415zm3.584 0v-2.15h-.566l-.641 1.471-.642-1.471h-.566v2.15h.416v-1.622l.603 1.396h.415l.604-1.396v1.622h.415-.038zM812.682 503.095c.188 0 .415.037.566.113.188.075.339.188.49.302.151.151.227.302.34.452.075.189.113.378.113.566 0 .189-.038.378-.113.566-.076.189-.189.34-.34.453a1.329 1.329 0 01-.49.302 1.527 1.527 0 01-.566.113 1.72 1.72 0 01-.604-.113c-.189-.075-.34-.189-.491-.302-.151-.151-.226-.302-.301-.453a1.501 1.501 0 01-.114-.566c0-.188.038-.377.114-.566.075-.188.188-.339.301-.452.151-.151.302-.227.491-.302.189-.076.377-.113.604-.113zm0 2.603s.301 0 .452-.075c.151-.076.265-.151.378-.227a.784.784 0 00.226-.377c.076-.151.076-.302.076-.453 0-.151 0-.302-.076-.453-.075-.151-.151-.264-.226-.377-.076-.113-.227-.189-.378-.226-.151-.076-.301-.076-.452-.076-.151 0-.302 0-.453.076-.151.075-.264.151-.377.226a.778.778 0 00-.227.377 1.881 1.881 0 00-.075.453c0 .151 0 .302.075.453.076.151.151.264.227.377a.785.785 0 00.377.227c.151.075.302.075.453.075zm.075-1.849s.302.038.415.113a.345.345 0 01.151.302c0 .113 0 .189-.113.264-.076.076-.189.114-.34.151l.453.529h-.34l-.415-.529h-.15v.529h-.302v-1.359h.641zm-.339.264v.378h.339s.151 0 .189-.038c.037 0 .075-.076.075-.151s0-.113-.075-.151c-.038 0-.113-.038-.189-.038h-.339z"
            fill="#999"
          />
          <Path
            d="M760.083 368.618c29.658 0 53.693 23.847 53.693 53.277 0 29.431-24.035 53.278-53.693 53.278-29.657 0-53.692-23.847-53.692-53.278 0-29.43 24.035-53.277 53.692-53.277zm0-2.226c-30.826 0-55.918 24.865-55.918 55.466 0 30.6 25.092 55.466 55.918 55.466 30.827 0 55.919-24.866 55.919-55.466 0-30.601-25.092-55.466-55.919-55.466z"
            fill="url(#paint2_linear_4219_2151)"
          />
          <Path
            d="M760.083 368.618c29.658 0 53.693 23.847 53.693 53.277 0 29.431-24.035 53.278-53.693 53.278-29.657 0-53.692-23.847-53.692-53.278 0-29.43 24.035-53.277 53.692-53.277zm0-2.226c-30.826 0-55.918 24.865-55.918 55.466 0 30.6 25.092 55.466 55.918 55.466 30.827 0 55.919-24.866 55.919-55.466 0-30.601-25.092-55.466-55.919-55.466z"
            fill="url(#paint3_linear_4219_2151)"
          />
          <Path
            d="M760.083 368.618c29.658 0 53.693 23.847 53.693 53.277 0 29.431-24.035 53.278-53.693 53.278-29.657 0-53.692-23.847-53.692-53.278 0-29.43 24.035-53.277 53.692-53.277zm0-2.226c-30.826 0-55.918 24.865-55.918 55.466 0 30.6 25.092 55.466 55.918 55.466 30.827 0 55.919-24.866 55.919-55.466 0-30.601-25.092-55.466-55.919-55.466z"
            fill="url(#paint4_linear_4219_2151)"
          />
          <Path
            d="M713.371 470.268c-26.94 12.3-58.824.566-71.238-26.148-12.376-26.752-.566-58.372 26.375-70.635 26.94-12.3 58.824-.565 71.238 26.149 12.376 26.714.566 58.371-26.375 70.634zm.906 2c28.035-12.791 40.335-45.769 27.469-73.578-12.867-27.77-46.147-39.995-74.181-27.242-27.997 12.791-40.336 45.769-27.469 73.577 12.866 27.809 46.146 39.996 74.181 27.243z"
            fill="url(#paint5_linear_4219_2151)"
          />
          <Path
            d="M690.921 366.392c-30.827 0-55.919 24.865-55.919 55.466 0 30.6 25.092 55.466 55.919 55.466 30.827 0 55.918-24.866 55.918-55.466 0-30.601-25.054-55.466-55.918-55.466zm0 2.226c29.657 0 53.692 23.847 53.692 53.277 0 29.431-24.035 53.278-53.692 53.278-29.658 0-53.693-23.884-53.693-53.315 0-29.431 24.035-53.24 53.693-53.24z"
            fill="url(#paint6_linear_4219_2151)"
          />
          <Path
            d="M667.904 505.17v-9.244c0-3.472-2.226-5.811-5.848-5.849-1.887 0-3.849.566-5.207 2.604-1.019-1.623-2.642-2.604-4.906-2.604-1.584 0-3.131.453-4.339 2.189v-1.812h-3.245v14.716h3.245v-8.15c0-2.566 1.434-3.924 3.622-3.924 2.189 0 3.245 1.396 3.245 3.886v8.188h3.245v-8.15c0-2.566 1.51-3.924 3.623-3.924 2.113 0 3.245 1.396 3.245 3.886v8.188H667.904zm48.297-14.716h-5.283v-4.452h-3.245v4.452h-3.018v2.944h3.018v6.716c0 3.433 1.321 5.471 5.17 5.471 1.396 0 3.018-.415 4.037-1.132l-.943-2.754c-.981.566-2.038.83-2.868.83-1.622 0-2.151-.981-2.151-2.453v-6.641h5.283v-2.981zm27.544-.377c-1.849 0-3.094.868-3.924 2.151v-1.774h-3.207v14.716h3.245v-8.263c0-2.453 1.056-3.774 3.169-3.774.642 0 1.321.076 2.038.378l.981-3.019a7.434 7.434 0 00-2.302-.415zm-41.656 1.547c-1.547-1.019-3.698-1.547-6.075-1.547-3.773 0-6.188 1.774-6.188 4.717 0 2.414 1.811 3.886 5.132 4.339l1.509.226c1.773.264 2.604.717 2.604 1.547 0 1.132-1.17 1.774-3.396 1.774-2.227 0-3.849-.717-4.943-1.547l-1.51 2.49c1.774 1.283 4 1.924 6.415 1.924 4.301 0 6.792-2 6.792-4.792 0-2.603-1.962-3.962-5.207-4.414l-1.51-.227c-1.396-.188-2.528-.453-2.528-1.434 0-1.094 1.057-1.735 2.83-1.735 1.887 0 3.736.717 4.641 1.245l1.396-2.604.038.038zm86.557-1.547c-1.849 0-3.094.868-3.924 2.151v-1.774h-3.207v14.716h3.245v-8.263c0-2.453 1.056-3.774 3.169-3.774.642 0 1.321.076 2.038.378l.981-3.019a7.434 7.434 0 00-2.302-.415zm-41.618 7.735c0 4.453 3.132 7.735 7.924 7.735 2.226 0 3.735-.49 5.357-1.773l-1.547-2.604c-1.207.868-2.49 1.321-3.886 1.321-2.566 0-4.49-1.887-4.49-4.717 0-2.829 1.887-4.678 4.49-4.716 1.396 0 2.679.453 3.886 1.321l1.547-2.604c-1.622-1.245-3.094-1.773-5.357-1.773-4.792 0-7.924 3.282-7.924 7.735v.075zm30.261 0v-7.358h-3.245v1.774c-1.019-1.321-2.566-2.151-4.679-2.151-4.15 0-7.433 3.245-7.433 7.735s3.245 7.735 7.433 7.735c2.113 0 3.66-.83 4.679-2.151v1.774h3.245v-7.358zm-12.037 0c0-2.603 1.698-4.716 4.49-4.716 2.793 0 4.491 2.037 4.491 4.716 0 2.679-1.812 4.717-4.491 4.717-2.679 0-4.49-2.113-4.49-4.717zm-39.014-7.735c-4.34 0-7.396 3.132-7.396 7.735s3.17 7.735 7.622 7.735c2.226 0 4.301-.566 6.075-2.075l-1.585-2.377c-1.245.981-2.83 1.547-4.301 1.547-2.076 0-3.962-.943-4.453-3.622h11.018c0-.415.075-.793.075-1.246 0-4.603-2.905-7.735-7.055-7.735v.038zm-.038 2.868c2.075 0 3.433 1.283 3.773 3.584h-7.697c.339-2.113 1.66-3.584 3.962-3.584h-.038zm81.086 4.867v-13.281h-3.245v7.697c-1.019-1.321-2.566-2.151-4.679-2.151-4.151 0-7.433 3.245-7.433 7.735s3.245 7.735 7.433 7.735c2.113 0 3.66-.83 4.679-2.151v1.774h3.245v-7.358zm-12.037 0c0-2.603 1.698-4.716 4.49-4.716 2.792 0 4.49 2.037 4.49 4.716 0 2.679-1.811 4.717-4.49 4.717-2.679 0-4.49-2.113-4.49-4.717zm-109.158 0v-7.358h-3.245v1.774c-1.019-1.321-2.566-2.151-4.679-2.151-4.15 0-7.433 3.245-7.433 7.735s3.245 7.735 7.433 7.735c2.113 0 3.66-.83 4.679-2.151v1.774h3.245v-7.358zm-11.999 0c0-2.603 1.698-4.716 4.49-4.716 2.792 0 4.49 2.037 4.49 4.716 0 2.679-1.811 4.717-4.49 4.717-2.679 0-4.49-2.113-4.49-4.717z"
            fill="url(#paint7_linear_4219_2151)"
          />
        </G>
        <Path
          d="M737.489 89.987v19.549h-10.158V95.992l-11.577 1.337c-2.542.292-3.661 1.118-3.661 2.64 0 2.23 2.124 3.169 6.676 3.169 2.776 0 5.852-.41 8.568-1.118l-5.259 7.397a29.118 29.118 0 01-6.378.701c-9.213 0-14.472-3.638-14.472-10.095 0-5.696 4.134-8.687 13.527-9.745l12.408-1.433c-.67-3.585-3.392-5.143-8.806-5.143-5.08 0-10.691 1.29-15.711 3.698l1.598-8.745c4.666-1.939 9.985-2.937 15.357-2.937 11.816 0 17.9 4.875 17.9 14.263l-.012.006zm-91.385-24.478L635 109.536h11.104l5.51-22.124 9.554 11.38h11.577l9.554-11.38 5.51 22.124h11.104l-11.104-44.033-20.856 24.615-20.855-24.615.006.006zm41.705-44.032l-20.856 24.614-20.849-24.614L635 65.51h11.104l5.51-22.123 9.554 11.38h11.577l9.554-11.38 5.51 22.123h11.104l-11.104-44.032zm76.381 68.1l-8.98-1.29c-2.244-.351-3.129-1.059-3.129-2.29 0-1.997 2.184-2.877 6.677-2.877 5.199 0 9.865 1.058 14.771 3.347l-1.238-8.627c-3.961-1.409-8.508-2.11-13.234-2.11-11.044 0-17.075 3.817-17.075 10.684 0 5.345 3.309 8.335 10.338 9.393l9.1 1.35c2.303.35 3.249 1.23 3.249 2.64 0 1.998-2.124 2.937-6.438 2.937-5.671 0-11.816-1.35-16.835-3.758l1.005 8.627c4.314 1.588 9.925 2.527 15.184 2.527 11.343 0 17.248-3.936 17.248-10.922 0-5.577-3.308-8.573-10.631-9.626l-.012-.005zm14.592-20.138v40.097h10.158V69.439h-10.158zm22.028 22.076l14.125-15.209h-12.641L788.94 92.038l14.239 17.492H816l-15.19-18.021v.006zm-23.446-35.519c0 6.457 5.259 10.096 14.472 10.096 2.184 0 4.254-.238 6.377-.702l5.259-7.396c-2.716.702-5.791 1.118-8.567 1.118-4.547 0-6.677-.94-6.677-3.169 0-1.528 1.125-2.349 3.662-2.64l11.576-1.337v13.543h10.159V45.961c0-9.394-6.085-14.264-17.9-14.264-5.379 0-10.691 1-15.358 2.937l-1.597 8.746c5.019-2.408 10.631-3.698 15.71-3.698 5.415 0 8.137 1.558 8.807 5.143l-12.408 1.433c-9.393 1.058-13.527 4.049-13.527 9.744l.012-.006zm-28.412-2.11c0 8.104 4.726 12.212 14.059 12.212 3.722 0 6.797-.589 9.746-1.938l1.298-8.865c-2.835 1.7-5.731 2.58-8.627 2.58-4.373 0-6.323-1.76-6.323-5.696V40.438h15.417V32.28h-15.417v-6.927l-19.318 10.155v4.93h9.153V53.88l.012.006zm-9.985-3.698v1.997h-27.455c1.239 4.067 4.918 5.928 11.451 5.928 5.199 0 10.045-1.058 14.353-3.11l-1.239 8.574c-3.96 1.64-8.98 2.527-14.119 2.527-13.646 0-21.089-5.987-21.089-17.081 0-11.095 7.562-17.32 19.259-17.32 11.696 0 18.845 6.754 18.845 18.49l-.006-.005zm-27.586-4.816h17.362c-.916-3.894-3.925-5.928-8.735-5.928s-7.664 1.98-8.627 5.928z"
          fill="#EEE"
        />
      </G>
      {props.address && (
        <Text x={40} y={500} fontSize="40px" fontWeight={800} fill="#EEE">
          {props.address}
        </Text>
      )}
      <Defs>
        <LinearGradient
          id="paint0_linear_4219_2151"
          x1={714.428}
          y1={453.854}
          x2={805.777}
          y2={389.861}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#BFBFBF" />
          <Stop offset={0.18} stopColor="#BFBFBF" />
          <Stop offset={0.52} stopColor="#A6A6A6" />
          <Stop offset={0.72} stopColor="#A9A9A9" />
          <Stop offset={0.89} stopColor="#B4B4B4" />
          <Stop offset={1} stopColor="#BFBFBF" />
        </LinearGradient>
        <LinearGradient
          id="paint1_linear_4219_2151"
          x1={645.265}
          y1={453.854}
          x2={736.614}
          y2={389.861}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#363636" />
          <Stop offset={0.05} stopColor="#414141" />
          <Stop offset={0.12} stopColor="#4A4A4A" />
          <Stop offset={0.23} stopColor="#4D4D4D" />
          <Stop offset={0.5} stopColor="#3C3C3C" />
          <Stop offset={0.59} stopColor="#363636" />
          <Stop offset={0.73} stopColor="#393939" />
          <Stop offset={0.86} stopColor="#444" />
          <Stop offset={0.98} stopColor="#565656" />
          <Stop offset={1} stopColor="#595959" />
        </LinearGradient>
        <LinearGradient
          id="paint2_linear_4219_2151"
          x1={714.428}
          y1={453.854}
          x2={805.777}
          y2={389.861}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#35312D" />
          <Stop offset={0.2} stopColor="#383530" />
          <Stop offset={0.41} stopColor="#41413A" />
          <Stop offset={0.5} stopColor="#474941" />
          <Stop offset={0.55} stopColor="#425145" />
          <Stop offset={0.61} stopColor="#356752" />
          <Stop offset={0.64} stopColor="#2F7459" />
          <Stop offset={0.66} stopColor="#49846D" />
          <Stop offset={0.7} stopColor="#8CAEA1" />
          <Stop offset={0.74} stopColor="#BDCDC6" />
          <Stop offset={0.77} stopColor="#DBDFDE" />
          <Stop offset={0.78} stopColor="#E7E7E7" />
          <Stop offset={0.81} stopColor="#E2E2E2" />
          <Stop offset={0.84} stopColor="#D4D5D4" />
          <Stop offset={0.87} stopColor="#BEBFBD" />
          <Stop offset={0.9} stopColor="#9FA09C" />
          <Stop offset={0.93} stopColor="#777873" />
          <Stop offset={0.96} stopColor="#474941" />
          <Stop offset={0.98} stopColor="#474941" />
          <Stop offset={1} stopColor="#47383B" />
        </LinearGradient>
        <LinearGradient
          id="paint3_linear_4219_2151"
          x1={739.331}
          y1={407.331}
          x2={783.704}
          y2={438.384}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#35312D" />
          <Stop offset={0.11} stopColor="#3F3B38" />
          <Stop offset={0.3} stopColor="#5B5856" />
          <Stop offset={0.56} stopColor="#878787" />
          <Stop offset={0.58} stopColor="#8C8C8C" />
          <Stop offset={0.67} stopColor="#828081" />
          <Stop offset={0.82} stopColor="#6A6264" />
          <Stop offset={1} stopColor="#47383B" />
        </LinearGradient>
        <LinearGradient
          id="paint4_linear_4219_2151"
          x1={714.428}
          y1={453.854}
          x2={805.777}
          y2={389.861}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#35312D" />
          <Stop offset={0.05} stopColor="#383530" />
          <Stop offset={0.09} stopColor="#41413A" />
          <Stop offset={0.11} stopColor="#474941" />
          <Stop offset={0.12} stopColor="#4B4B41" />
          <Stop offset={0.13} stopColor="#595241" />
          <Stop offset={0.14} stopColor="#705E41" />
          <Stop offset={0.15} stopColor="#916E41" />
          <Stop offset={0.16} stopColor="#BA8341" />
          <Stop offset={0.17} stopColor="#FAA442" />
          <Stop offset={0.18} stopColor="#F5E489" />
          <Stop offset={0.19} stopColor="#F5F197" />
          <Stop offset={0.2} stopColor="#F6F3AB" />
          <Stop offset={0.22} stopColor="#FBF9D8" />
          <Stop offset={0.24} stopColor="#FDFDF4" />
          <Stop offset={0.25} stopColor="#fff" />
          <Stop offset={0.26} stopColor="#FEFDF4" />
          <Stop offset={0.27} stopColor="#FBF9D9" />
          <Stop offset={0.29} stopColor="#F7F3AC" />
          <Stop offset={0.3} stopColor="#F5F197" />
          <Stop offset={0.31} stopColor="#ECED91" />
          <Stop offset={0.32} stopColor="#D6E382" />
          <Stop offset={0.33} stopColor="#BDD972" />
          <Stop offset={0.36} stopColor="#C2E4D1" />
          <Stop offset={0.42} stopColor="#89C2EA" />
          <Stop offset={0.44} stopColor="#7CB0DE" />
          <Stop offset={0.47} stopColor="#6E9CD2" />
          <Stop offset={0.48} stopColor="#6995CE" />
          <Stop offset={0.5} stopColor="#7097CF" />
          <Stop offset={0.53} stopColor="#83A0D2" />
          <Stop offset={0.54} stopColor="#86A1D3" />
          <Stop offset={0.57} stopColor="#88BFE8" />
          <Stop offset={0.64} stopColor="#AFDEF7" />
          <Stop offset={0.68} stopColor="#D9F0FA" />
          <Stop offset={0.75} stopColor="#fff" />
          <Stop offset={0.81} stopColor="#FFFBD9" />
          <Stop offset={0.84} stopColor="#FDF496" />
          <Stop offset={0.87} stopColor="#FCF05D" />
          <Stop offset={0.89} stopColor="#FDC253" />
          <Stop offset={0.91} stopColor="#DB86B8" />
          <Stop offset={0.92} stopColor="#1B2119" />
          <Stop offset={0.95} stopColor="#0C120D" />
          <Stop offset={0.96} stopColor="#FBD2A4" />
          <Stop offset={0.97} stopColor="#F2F8F6" />
          <Stop offset={0.98} stopColor="#007350" />
          <Stop offset={1} stopColor="#47383B" />
        </LinearGradient>
        <LinearGradient
          id="paint5_linear_4219_2151"
          x1={718.76}
          y1={374.28}
          x2={662.655}
          y2={470.238}
          gradientUnits="userSpaceOnUse"
        >
          <Stop offset={0.07} stopColor="#474941" />
          <Stop offset={0.08} stopColor="#4C4944" />
          <Stop offset={0.11} stopColor="#534B49" />
          <Stop offset={0.14} stopColor="#5F5856" />
          <Stop offset={0.18} stopColor="#817A79" />
          <Stop offset={0.25} stopColor="#B7B2B1" />
          <Stop offset={0.32} stopColor="#F7F3F4" />
          <Stop offset={0.34} stopColor="#F8F2D2" />
          <Stop offset={0.4} stopColor="#FCF05D" />
          <Stop offset={0.43} stopColor="#FAB242" />
          <Stop offset={0.44} stopColor="#F8A02F" />
          <Stop offset={0.45} stopColor="#F69624" />
          <Stop offset={0.46} stopColor="#D28B2D" />
          <Stop offset={0.47} stopColor="#A4823E" />
          <Stop offset={0.48} stopColor="#6E7851" />
          <Stop offset={0.49} stopColor="#6E775A" />
          <Stop offset={0.5} stopColor="#837A6C" />
          <Stop offset={0.51} stopColor="#A47E89" />
          <Stop offset={0.52} stopColor="#DB86B8" />
          <Stop offset={0.53} stopColor="#D8599F" />
          <Stop offset={0.55} stopColor="#C67BA6" />
          <Stop offset={0.56} stopColor="#8A5C74" />
          <Stop offset={0.57} stopColor="#35312D" />
          <Stop offset={0.8} stopColor="#282A24" />
        </LinearGradient>
        <LinearGradient
          id="paint6_linear_4219_2151"
          x1={645.265}
          y1={453.854}
          x2={736.614}
          y2={389.861}
          gradientUnits="userSpaceOnUse"
        >
          <Stop offset={0.01} stopColor="#1B1A14" />
          <Stop offset={0.03} stopColor="#5F57A5" />
          <Stop offset={0.05} stopColor="#AD76B1" />
          <Stop offset={0.07} stopColor="#D5148A" />
          <Stop offset={0.09} stopColor="#F78F33" />
          <Stop offset={0.12} stopColor="#F9EC4A" />
          <Stop offset={0.13} stopColor="#CBDE88" />
          <Stop offset={0.14} stopColor="#C3BF8A" />
          <Stop offset={0.15} stopColor="#BF857D" />
          <Stop offset={0.16} stopColor="#ECB15E" />
          <Stop offset={0.17} stopColor="#FDC253" />
          <Stop offset={0.19} stopColor="#FDF496" />
          <Stop offset={0.2} stopColor="#FEEE45" />
          <Stop offset={0.22} stopColor="#FEF48E" />
          <Stop offset={0.24} stopColor="#FEFCDF" />
          <Stop offset={0.25} stopColor="#fff" />
          <Stop offset={0.29} stopColor="#F4FAFD" />
          <Stop offset={0.36} stopColor="#E1F1E7" />
          <Stop offset={0.37} stopColor="#F7F4B2" />
          <Stop offset={0.38} stopColor="#FBF5AB" />
          <Stop offset={0.4} stopColor="#C3DF9A" />
          <Stop offset={0.41} stopColor="#BDDCA4" />
          <Stop offset={0.42} stopColor="#97CBEE" />
          <Stop offset={0.45} stopColor="#87ADDC" />
          <Stop offset={0.46} stopColor="#86A1D3" />
          <Stop offset={0.48} stopColor="#9195C9" />
          <Stop offset={0.49} stopColor="#998FC4" />
          <Stop offset={0.5} stopColor="#8491C8" />
          <Stop offset={0.51} stopColor="#6995CE" />
          <Stop offset={0.53} stopColor="#6E9CD2" />
          <Stop offset={0.55} stopColor="#7CB0DE" />
          <Stop offset={0.57} stopColor="#89C2EA" />
          <Stop offset={0.63} stopColor="#C2E4D1" />
          <Stop offset={0.7} stopColor="#F5F197" />
          <Stop offset={0.72} stopColor="#F7F3AC" />
          <Stop offset={0.75} stopColor="#FBF9D9" />
          <Stop offset={0.77} stopColor="#FEFDF4" />
          <Stop offset={0.79} stopColor="#fff" />
          <Stop offset={0.8} stopColor="#FDFDF4" />
          <Stop offset={0.81} stopColor="#FBF9D8" />
          <Stop offset={0.83} stopColor="#F6F3AB" />
          <Stop offset={0.84} stopColor="#F5F197" />
          <Stop offset={0.85} stopColor="#F6F089" />
          <Stop offset={0.86} stopColor="#F8EF77" />
          <Stop offset={0.87} stopColor="#FEEE45" />
          <Stop offset={0.89} stopColor="#FAA442" />
          <Stop offset={0.9} stopColor="#FAA742" />
          <Stop offset={0.91} stopColor="#FBAD43" />
          <Stop offset={0.94} stopColor="#94719D" />
          <Stop offset={0.95} stopColor="#725A75" />
          <Stop offset={0.96} stopColor="#574855" />
          <Stop offset={0.97} stopColor="#443B3F" />
          <Stop offset={0.98} stopColor="#383331" />
          <Stop offset={0.99} stopColor="#35312D" />
          <Stop offset={1} stopColor="#35312D" />
        </LinearGradient>
        <LinearGradient
          id="paint7_linear_4219_2151"
          x1={771.704}
          y1={540.751}
          x2={682.846}
          y2={451.93}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#999" />
          <Stop offset={0.1} stopColor="#B3B3B3" />
          <Stop offset={0.24} stopColor="#B0B0B0" />
          <Stop offset={0.43} stopColor="#BFBFBF" />
          <Stop offset={0.61} stopColor="#BFBFBF" />
          <Stop offset={0.71} stopColor="#999" />
          <Stop offset={0.8} stopColor="#B3B3B3" />
          <Stop offset={1} stopColor="#999" />
        </LinearGradient>
        <ClipPath id="clip0_4219_2151">
          <Rect width={850.7} height={540} rx={31.8} fill="#fff" />
        </ClipPath>
        <ClipPath id="clip1_4219_2151">
          <Path
            fill="#fff"
            transform="translate(635.002 366.392)"
            d="M0 0H181V139.608H0z"
          />
        </ClipPath>
      </Defs>
    </Svg>
  </View>
);

const CardImage = (props: CardImageProps) => {
  const { type, address: rawAddress, status } = props;
  const address = truncateAddress(rawAddress);
  const hasLowerOpacity =
    status === CardStatus.FROZEN || status === CardStatus.BLOCKED;

  switch (type) {
    case CardType.VIRTUAL:
      return (
        <VirtualCardImage
          {...props}
          address={address}
          hasLowerOpacity={hasLowerOpacity}
        />
      );
    case CardType.PHYSICAL:
    case CardType.METAL:
      return (
        <MetalCardImage
          {...props}
          address={address}
          hasLowerOpacity={hasLowerOpacity}
        />
      );
  }
};

export default CardImage;
